<script setup lang="ts">
import { ref } from 'vue'
import Player from '@/components/Player.vue'
const dialogVisible = ref(true)

const open = () => {
  dialogVisible.value = true
}
const emits = defineEmits(['close-scale'])
const props = defineProps({
  configOptions: {
    type: Object,
    default: () => {}
  }
})
// const getVideoAIOptions = () => {
//   return {
//     id: 'refName',
//     width: '100%',
//     height: '100%',
//     source:
//       'https://vod.play.t-aaron.com/da1b1c30796d71eebfff7035d0b20102/e4c05858dbc94c20ba0ccf9464bd926d-fe8119f756e23f009b954affb89b754b-hd.mp4',
//     isLive: false
//   }
// }
const handleClose = (done: () => void) => {
  emits('close-scale', true)
}
defineExpose({ open })
</script>
<template>
  <div class="monitorModelBox">
    <el-dialog
      v-model="dialogVisible"
      :title="configOptions.title"
      width="35%"
      :before-close="handleClose"
    >
      <div class="video-box">
        <Player ref="refName" :options="configOptions" />
      </div>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
:deep(.el-dialog) {
  padding: 0;
  background: rgba(0, 44, 73, 0.5);
  font-weight: 500;
  font-size: 22px;
  background: rgba(0,44,73,0.5);
border: 1px solid;
border-image: linear-gradient(0deg, #79B6FF, #32B4FF) 10 10;
}
:deep(.el-dialog__header) {
  padding: 0 23px;
  background: linear-gradient(180deg, #0967B1 0%, rgba(9,101,173,0.33) 100%);
  box-shadow: 0px -6px 13px 0px rgba(0,192,255,0.22);
  height: 48px;
  line-height: 48px;
}
:deep(.el-dialog__header)::after {  
  content: '';  
  position: absolute;  
  left: 0;  
  right: 0;  
  top: 48px; /* 将伪元素放在元素下方 */  
  height: 2px; /* 下边框的厚度 */  
  background: linear-gradient(90deg, #01fbf9 0%, #08497b 60%);  
  z-index: 0;  
}  
:deep(.el-dialog__headerbtn) {
  height: 65px;
  font-size: 30px;
  font-weight: 700;
  color: white !important;
}
:deep(.el-dialog__title){
  color: #FFFFFF;
// line-height: 209px;
background: linear-gradient(0deg, #FFFFFF 0%, #BAE1FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}
:deep(.el-dialog__headerbtn .el-dialog__close){
  color: white;
  background: linear-gradient(0deg, #FFFFFF 0%, #2E9BE2 100%);
  -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.monitorModelBox {
  .video-box {
    padding: 12px;
    height: 430px;
  }
}
</style>
